<template>
    <div style="background: #eee;">
    <ul class="icon" >
      <li>
        <span class="iconfont icon-xiao24"></span>
        <span>风机</span>
      </li>
      <li>
        <span class="iconfont icon-jiudian"></span>
        <span>酒店</span>
      </li>
      <li>
        <span class="iconfont icon-gongyu"></span>
        <span>公寓</span>
      </li>
      <li>
        <span class="iconfont icon-lower-triangle"></span>
        <span>更多</span>
      </li>
    </ul>
      <ul class="foot">
        <li><a href="#">登陆</a></li>
        <li><a href="#">我的订单</a></li>
        <li><a href="#">最近浏览</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
      <ul class="foot-text">
        <li>触屏版</li>
        <li><a href="#">电脑版</a></li>
      </ul>
      <div style="line-height:0.4rem;text-align: center;color: #666;">Qunar 京ICP备05021087意见反馈</div>
    </div>
</template>

<script>
    export default {
        name: "Footer"
    }
</script>

<style lang="stylus" scoped>
 .icon{
   width: 300px;
   margin: 0 auto;
   overflow: hidden;
   li{
     padding-left: 10px;
     line-height .2rem;
     width: 65px;
     float: left;
     position: relative;
     background: none;
     color #ddd;
   }
   .iconfont{
     font-size 20px;
   }
 }
  .foot{
    width 100%;
    display flex;
    line-height 0.2rem;
    border-bottom 1px solid #ccc;
    padding-bottom 0.1rem;
    li{
      margin-left 0.2rem;
      margin-top:0.1rem;
    }
  }
  .foot-text{
    padding: 10px 0 0 0;
    text-align: center;
    li{
      display: inline-block;
      margin: 0 15px;
    }

  }
</style>
